﻿<common:LayoutAwarePage x:Class="KouDai.WinPad.Views.SecondHotPage"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:Control="using:KouDai.WinPad.Controls"
                        xmlns:cal="using:Caliburn.Micro"
                        xmlns:common="using:KouDai.WinPad.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:i="using:Windows.UI.Interactivity"
                        xmlns:local="using:KouDai.WinPad.Views"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:vm="using:KouDai.WinPad.ViewModels"
                        x:Name="pageRoot"
                        cal:Bind.AtDesignTime="True"
                        d:DataContext="{d:DesignInstance Type=vm:SecondHotPageViewModel,
                                                         IsDesignTimeCreatable=True}"
                        mc:Ignorable="d">

    <Page.Resources>

        <!--  Collection of items displayed by this page  -->
        <CollectionViewSource x:Name="itemsViewSource"
                              IsSourceGrouped="True"
                              Source="{Binding SecondHoneyItems}"
                              d:Source="{Binding SecondHoneyItems,
                                                 Source={d:DesignInstance Type=vm:SecondHotPageViewModel,
                                                                          IsDesignTimeCreatable=True}}" />


    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <SemanticZoom x:Name="semanticZoom" Grid.RowSpan="2">
            <SemanticZoom.ZoomedInView>
                <Control:CustomGridView x:Name="itemGridView"
                                        Grid.RowSpan="2"
                                        AutomationProperties.AutomationId="ItemsGridView"
                                        AutomationProperties.Name="Items"
                                        IsItemClickEnabled="True"
                                        IsSwipeEnabled="false"
                                        ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                                        Padding="116,136,116,46"
                                        ScrollViewer.IsDeferredScrollingEnabled="False"
                                        SelectionMode="None"
                                        TabIndex="1"
                                        cal:Message.Attach="[Event ItemClick] = [Action ItemSelect($eventArgs)]">
                    <Control:CustomGridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="{StaticResource ImageWallBackBrush}">
                                <Image Source="{Binding ImageUrlForIphone}" Stretch="UniformToFill" />
                                <Border VerticalAlignment="Bottom" Background="{StaticResource PriceBackgroundBrush}">
                                    <TextBlock Margin="5,0"
                                               HorizontalAlignment="Left"
                                               FontFamily="Arial"
                                               FontSize="18.667"
                                               Foreground="{StaticResource CommonWhiteBrush}"
                                               Text="{Binding Price}" />
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </Control:CustomGridView.ItemTemplate>
                    <Control:CustomGridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        </Style>
                    </Control:CustomGridView.ItemContainerStyle>
                    <Control:CustomGridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Margin="0,30,0,0" Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </Control:CustomGridView.ItemsPanel>
                    <Control:CustomGridView.GroupStyle>
                        <GroupStyle HeaderTemplate="{StaticResource GrouopHeaderDataTemplate}">
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Margin="0,20,30,0"
                                                           ItemHeight="160"
                                                           ItemWidth="160"
                                                           MaximumRowsOrColumns="4"
                                                           Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </Control:CustomGridView.GroupStyle>
                </Control:CustomGridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="zoomOutGridView"
                          IsSwipeEnabled="False"
                          Padding="116,136,116,46"
                          ScrollViewer.IsDeferredScrollingEnabled="False"
                          SelectionMode="None">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="4*" />
                                </Grid.ColumnDefinitions>

                                <Image Source="ms-appx:///Assets/Images/left_gray.png" />

                                <!--
                                    <Image Grid.Column="1"
                                    Grid.ColumnSpan="2"
                                    Source="{Binding ImageUrl}"
                                    Stretch="UniformToFill" />
                                    <Control:VerticalTextBlock x:Name="LeftHeader"
                                    Margin="0,5,0,0"
                                    FontSize="26.667"
                                    Foreground="{StaticResource CommonWhiteBrush}"
                                    Text="{Binding GroupName}" />
                                -->
                                <Image Grid.Column="1"
                                       Grid.ColumnSpan="2"
                                       Source="{Binding Group.Key.ImageUrl}"
                                       Stretch="UniformToFill" />
                                <Control:VerticalTextBlock x:Name="LeftHeader"
                                                           Margin="0,5,0,0"
                                                           FontSize="26.667"
                                                           Foreground="{StaticResource CommonWhiteBrush}"
                                                           Text="{Binding Group.Key.GroupName}" />

                                <!--
                                    <TextBlock FontFamily="Segoe UI Light"
                                    FontSize="24"
                                    Text="{Binding Group.Key.GroupName}" />
                                -->

                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid VerticalAlignment="Center"
                                      ItemHeight="176"
                                      ItemWidth="362"
                                      MaximumRowsOrColumns="2" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
        <!--  Horizontal scrolling grid used in most view states  -->


        <!--  Vertical scrolling list only used when snapped  -->
        <ListView x:Name="itemListView"
                  Grid.Row="1"
                  Margin="0,10,0,0"
                  AutomationProperties.AutomationId="ItemsListView"
                  AutomationProperties.Name="Items"
                  IsItemClickEnabled="True"
                  IsSwipeEnabled="false"
                  ItemTemplate="{StaticResource SanpDataTemplate}"
                  ItemsSource="{Binding SnapListItems}"
                  Padding="10,0,0,60"
                  SelectionMode="None"
                  TabIndex="1"
                  Visibility="Collapsed"
                  cal:Message.Attach="[Event ItemClick] = [Action ListItemClick($eventArgs)]" />

        <!--  Back button and page title  -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="GoBack" Style="{StaticResource BackButtonStyle}" />
            <StackPanel x:Name="HeaderStack"
                        Grid.Column="1"
                        Margin="0,0,30,30"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        Orientation="Horizontal"
                        Tapped="Header_Tapped">
                <TextBlock x:Name="pageTitle"
                           FontFamily="Microsoft YaHei"
                           Style="{StaticResource NewPageHeaderTextStyle}"
                           Text="{Binding Title}" />
                <Image x:Name="Arrow"
                       Width="20"
                       Height="20"
                       Margin="10,0,0,0"
                       Source="/Assets/Images/header_arrow.png"
                       Stretch="UniformToFill" />
            </StackPanel>

            <Border Grid.ColumnSpan="2"
                    VerticalAlignment="Bottom"
                    BorderBrush="#FFEFEFEF"
                    BorderThickness="1,1,1,1" />
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!--  Visual states reflect the application's view state  -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!--  The entire page respects the narrower 100-pixel margin convention for portrait  -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoBack" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,136,86,56" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoBack" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderStack" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0,0,30,20</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
